<script setup lang="ts">
	import { useI18n } from 'vue-i18n'
	import { pointsInfo, bankCardInfo, withdrawalApply, configList, getQuickWithdrawCards, getWithdrawalChannel } from '@/api/user'
	import { onMounted, reactive, ref, watch } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { add, convertNumbers } from '@/utils/utils'
	import { useDraggable } from '@/utils/useDraggable';
	const { t } = useI18n()
	const params = ref({
		country: 1,
		platform: 0,
		ac_type: 1,
		
	});
	const countryId = ref(0)
	const baseData = reactive({
		showDetail: false,
		aircraftUrl: uni.getStorageSync('aircraftUrl'),
		withdrawForm: {
			Charge: 0,
			actual: 0,
			points: 0,
			fixedKey: 0,
		},
		serviceCharges: 0,
		thresholdNum: 0,
		wallet: {},
		cards: {},
	})
	
	const pagedata = reactive({
		todayPoints: 0,
		totalPoints: 0,
		yesterdayPoints: 0,
		showLoginOut: false,
		aircraftUrl: uni.getStorageSync('aircraftUrl'),
		pagelist: [
			'index/index',
			'scan/index',
			'user/index',
			'withdraw/index',
			'user/leaderBoard/index',
			'login/index',
			'user/revenue/revenue',
			'user/withdreawalInfo/withdreawalInfo',
			'user/message/message',
			'user/changPassword/changPassword',
			'user/level/level',
			'user/whatsApp/index',
		],
	})
	const promptAmount = ref(null);
	const promptAmountActual = ref(null);

	const withdrawAmounts = ref([])
	const currentWithdrawAmountIndex = ref(null)
	const withdrawBtnDisabled = ref(true)
	const quickRechargeClick = ref(false)

	const query = ref({})
	const maxCount = ref()
	const maxWithdrawCount = ref({})

	onLoad((options) => {
		query.value = options
	})
	const pageIndex = ref(4)
	const changPage = (e : any) => {
		uni.navigateTo({
			url: '/pages/' + pagedata.pagelist[e],
		})
	}
	const changMainPage = (e : any) => {
		console.log(getCurrentPages())
		
		uni.navigateTo({
			url: '/pages/' + pagedata.pagelist[e],
		})
	}
	
	
	const selectDefaultAmount = () => {
			const availableCards = withdrawAmounts.value
				.filter(item => item.amount <= baseData.wallet.totalPoints)
				.sort((a, b) => a.amount - b.amount)
			
			if (availableCards.length > 0) {
				const lowestCard = availableCards[0]
				const lowestCardIndex = withdrawAmounts.value.findIndex(item => item.ID === lowestCard.ID)
				
				if (lowestCardIndex !== -1) {
					withdrawAmounts.value = withdrawAmounts.value.map(item => ({
						...item,
						active: false
					}))
					
					withdrawAmounts.value[lowestCardIndex].active = true
					withdrawAmounts.value[lowestCardIndex].isDisabled = false
					currentWithdrawAmountIndex.value = lowestCardIndex
					quickRechargeClick.value = true
					withdrawBtnDisabled.value = false
					
					baseData.withdrawForm.points = lowestCard.amount
					baseData.withdrawForm.actual = lowestCard.actual
					baseData.withdrawForm.Charge = lowestCard.diffValue
					baseData.withdrawForm.fixedKey = lowestCard.fixedKey
				}
			}
		
	}

const withdrawAllSelected= ref(false)
	const withdrawAllshow = () => {
		if (!baseData.cards?.ID) {
			uni.showToast({
				title: t('Please add bank card'),
				icon: 'none',
			})
			return
		}
		if (baseData.wallet.totalPoints < 1000) return
		
		
		withdrawAmounts.value = withdrawAmounts.value.map((withdrawAmountsItem, withdrawAmountsIndex) => {
			return {
				...withdrawAmountsItem,
				active: false,
			}
		})
		
		withdrawAllSelected.value = true
		
		baseData.withdrawForm.points = baseData.wallet.totalPoints
		baseData.withdrawForm.Charge = 0.0
		baseData.withdrawForm.actual = baseData.wallet.totalPoints
		baseData.withdrawForm.fixedKey = 0;
		quickRechargeClick.value = true
		withdrawBtnDisabled.value = false
	}
	
	const showW = () => {
		console.log('baseData.wallet', baseData.wallet)
		if (withdrawBtnDisabled.value) {
			uni.showToast({
				title: t('Please select the withdrawal type'),
				icon: 'none',
			})
			return
		}
		if (!baseData.cards?.ID) {
			uni.showToast({
				title: t('Please add bank card'),
				icon: 'none',
			})
			return
		}
		
		
		withdrawalApplys()
	}
	
	const getCharge = (e : any) => {
		const points = parseInt(e, 10)

		if (points < 550) {
			uni.showToast({
				title: t('The minimum withdrawal amount is 550 points'),
				icon: 'none',
			})
			

			
			
			baseData.withdrawForm.Charge = parseInt(points, 10) * 0.1
		} else {

			if (parseInt(baseData.wallet.totalPoints, 10) <= points) {
				uni.showToast({
					title: t('Withdrawal points cannot exceed the withdrawable points'),
					icon: 'none',
				})
				setTimeout(function () {

					let serviceCharges = parseInt(baseData.wallet.totalPoints * (baseData.serviceCharges / 100), 10)
					console.log('serviceCharges', serviceCharges)
					if (points > Number(maxWithdrawCount.value?.content?.split(':')?.[0])) {
						serviceCharges = 0
					}
					baseData.withdrawForm.points = baseData.wallet.totalPoints - serviceCharges
					baseData.withdrawForm.Charge = serviceCharges
				}, 10)
			} else if (points >= 550 && points < Math.abs(Number(maxWithdrawCount.value?.content?.split(':')?.[0]))) {

				baseData.withdrawForm.points = points

				baseData.withdrawForm.Charge = points * 0.1
			} else {
				baseData.withdrawForm.points = points
				baseData.withdrawForm.Charge = 0
			}

		}
	}
	const symbol = ref('₹')
	const lang = ref('en')
	const selCountryNum = ref(1);
	const selPlatformNum = ref(0);

	const allocationList = ref({})
	const initPage = async () => {

		const res = await pointsInfo()
		if (res.code == 0) {
			baseData.wallet = res.data
		}
		const req = await getWithdrawalChannel();
		allocationList.value = req.data;
		const selectedCountry = allocationList.value.find(item => item.country === country.value);
		params.value.country = selectedCountry.country;
		countryId.value = selectedCountry.id

		uni.setStorageSync('platform', selectedCountry.platform);
		selPlatformNum.value = selectedCountry.platform;


		params.value.platform = selectedCountry.platform;
		params.value.channel_id = selectedCountry.id;
		if (country.value === 1 || country.value === 2 || country.value === 3) { 
			params.value.ac_type = 1;
		} else {
			params.value.ac_type = 2
		}
		const ress = await bankCardInfo({ country: country.value, platform: selPlatformNum.value })
		if (ress.code == 0) {
			baseData.cards = ress.data[0] || null
		}

		const rep = await configList({
			type: 1,
			fixedKey: 1,
		})
		if (rep.code == 0) {
			
			baseData.thresholdNum = parseInt(rep.data.content, 10)
		}

		const reps = await configList({
			type: 1,
			fixedKey: 3,
		})
		if (reps.code == 0) {
			
			baseData.serviceCharges = parseInt(reps.data.content, 10)
		}
		withdrawBtnDisabled.value = baseData.wallet.totalPoints < 550
		const cardData = await getQuickWithdrawCards()
		withdrawAmounts.value = cardData.data
			.filter((card) => card.ID !== 37)
			.map((item) => {
				const itemContentArr = item.content.split(':')
				return {
					...item,
					amount: Number(itemContentArr[0]),
					actual: Number(itemContentArr[1]),
					diffValue: Number(itemContentArr[0]) - Number(itemContentArr[1]),
					reate: Number(itemContentArr[2]),
					isDisabled: item?.amount > baseData?.wallet?.totalPoints, 
					active: false,
				}
			})
			.sort((a, b) => b.amount - a.amount)
		maxWithdrawCount.value = cardData.data.filter((card) => card.ID === 37)[0]
		maxCount.value = Math.abs(cardData.data.filter((card) => card.ID === 37)[0].content.split(':')[0])

		
		selectDefaultAmount()
	}

	const withdrawalApplys = async () => {
		
		if (baseData.withdrawForm.points < 550 && baseData.withdrawForm.Charge > 0 && !quickRechargeClick.value) {
			uni.showToast({
				title: t('The minimum withdrawal amount is 550 points'),
				icon: 'none',
			})
			return
		}

		if (
			parseInt(baseData.wallet.totalPoints, 10) >=
			parseInt(baseData.withdrawForm.points, 10)
		) {

			let ress
			
			if (!quickRechargeClick.value) {
				ress = await withdrawalApply({
					points: baseData.withdrawForm.points,
					fixed_value:
						baseData.withdrawForm.Charge > 0
							? add(baseData.withdrawForm.points, baseData.withdrawForm.Charge)
							: undefined,
					fixed_key: 0,
					...params.value,
				})
			}

			
			if (quickRechargeClick.value) {
				ress = await withdrawalApply({
					points: baseData.withdrawForm.points,
					fixed_value: baseData.withdrawForm.Charge > 0 ? baseData.withdrawForm.actual : undefined,
					fixed_key: baseData.withdrawForm.fixedKey,
					...params.value,
				})
			}
			if (ress.code == 0) {
				uni.showToast({
					title: t('Application Successful'),
					icon: 'none',
				})
				baseData.showDetail = false
				
				initPage()
			} else if (ress.code === 7) {

				uni.showToast({
					title: ress.msg,
					icon: 'none',
				})
			} else {
				uni.showToast({
					title:
						t('Starting from') +
						(baseData.thresholdNum + Math.floor(baseData.thresholdNum * (baseData.serviceCharges / 100))) +
						t('points'),
					icon: 'none',
				})
			}
		} else {
			uni.showToast({
				title: t('Insufficient Balance'),
				icon: 'none',
			})
		}
	}
	const rightClick = () => {
		if (query.value.prevPage === 'home') {
			uni.reLaunch({
				url: '/pages/index/index',
			})
			return;
		} else {
			uni.reLaunch({
				url: '/pages/user/index',
			})
		}
	}


	const navAddBank = () => {
		if (country.value == 1) {
			uni.navigateTo({
				url: '/pages/withdraw/addBank/index',
			})
		}
		if (country.value == 2) {
			uni.navigateTo({
				url: '/pages/withdraw/addBank/Indonesia',
			})
		}
		if (country.value == 3) {
			uni.navigateTo({
				url: '/pages/withdraw/addBank/Nigeria',
			})
		}
		if (country.value == 4) {
			uni.navigateTo({
				url: '/pages/withdraw/addBank/Bangladesh',
			})
		}
		if (country.value == 5) {
			uni.navigateTo({
				url: '/pages/withdraw/addBank/Pakistan',
			})
		}
	}
	const leftClick = () => {
		window.top?.postMessage('/pages/user/index', window.location.origin)
		uni.navigateTo({
			url: '/pages/user/index',
		})
	}
	const exchangeRate = ref(1);
	const amountItemClick = (item, index) => {
withdrawAllSelected.value = false
		if (baseData?.wallet?.totalPoints < item.amount) return

		if (index === currentWithdrawAmountIndex.value) {
			withdrawAmounts.value[index].active = !withdrawAmounts.value[index].active
			quickRechargeClick.value = withdrawAmounts.value[index].active
			withdrawBtnDisabled.value = baseData.wallet.totalPoints < 550
			
			
			if (!withdrawAmounts.value[index].active) {
				baseData.withdrawForm.points = 0
				baseData.withdrawForm.actual = 0
				baseData.withdrawForm.Charge = 0
				baseData.withdrawForm.fixedKey = 0
			} else {
				
				baseData.withdrawForm.points = item.amount
				baseData.withdrawForm.actual = item.actual
				baseData.withdrawForm.Charge = item.diffValue
				baseData.withdrawForm.fixedKey = item.fixedKey
			}
			return
		}
		withdrawAmounts.value = withdrawAmounts.value.map((withdrawAmountsItem, withdrawAmountsIndex) => {
			return {
				...withdrawAmountsItem,
				active: index === withdrawAmountsIndex,
			}
		})
		
		quickRechargeClick.value = true
		currentWithdrawAmountIndex.value = index
		promptAmount.value = item.reate * exchangeRate.value;
		promptAmountActual.value = item.reate * exchangeRate.value;
		
		
		baseData.withdrawForm.points = item.amount
		baseData.withdrawForm.actual = item.actual
		baseData.withdrawForm.Charge = item.diffValue
		baseData.withdrawForm.fixedKey = item.fixedKey
	}


	const country = ref(1)
	const openUrl = () => window.open(pagedata.aircraftUrl, '_blank');
	const { dragPosition, startDrag } = useDraggable(32, openUrl);
	
	onMounted(() => {
		uni.setNavigationBarTitle({
			title: 'Quovo ' + t('Earn money so easy') + '!',
		})
		symbol.value = uni.getStorageSync('symbol');
		lang.value = uni.getStorageSync('langs') || 'en';
		country.value = uni.getStorageSync('country') || 1;
		exchangeRate.value = uni.getStorageSync('exchangeRate') || 1;
		initPage()
	})

	watch(
		() => baseData?.wallet?.totalPoints,
		() => {
			withdrawAmounts.value = withdrawAmounts.value.map((item) => {
				return {
					...item,
					isDisabled: item?.amount > baseData?.wallet?.totalPoints,
				}
			})
			
			selectDefaultAmount()
		},
		{ deep: true, immediate: true }
	)
</script>

<template>
	<view class="withdraw-container">

<up-navbar :title="t('Withdrawal')" @click="leftClick" :autoBack="true">
						<template #left>
						  <view class="nav-back-btn">
						    <image class="back-icon" src="@/static/img/left.png"></image>
						  </view>
						</template>
					</up-navbar>
		
		<view class="header-gradient-section">
			<view class="title-section">
				<text class="main-title">{{t('Withdrawal')}}</text>
				<text class="main-title">{{t('Account')}}</text>
			</view>
			<view class="credit-card-3d">

			</view>
		</view>

		
		<view class="bank-account-section">
			<view class="bank-card" @click="navAddBank">
				<view class="card-left">
					<view class="bank-icon">
					</view>
					<view class="card-info">
						<text class="card-title">{{t('Bank Account')}}</text>
					</view>
				</view>
				<view class="card-right" v-if="baseData.cards">
					<view class="bind-info">
											<text class="bind-text">{{ baseData.cards?.account_num }}</text>
											<text class="bind-text">{{ baseData.cards?.holder_name }}</text>
										</view>
				</view>
				<view class="card-right" v-else>
					<view class="bind-info">
											<text class="bind-text">{{t('Unbound Bank account')}}.</text>
											<text class="bind-text">{{t('Go to bind')}}</text>
										</view>
					<text class="arrow">›</text>
				</view>
			</view>
		</view>

		
		<view class="withdrawal-amount-section">
			<view class="amount-header">
				<text class="amount-title">{{t('Withdrawal Amount')}}</text>
				<text class="account-balance">{{t('Account balance')}}: 
				<text style="color: #94c720!important;font-weight: 700;">{{symbol}}{{ convertNumbers(baseData.wallet.totalPoints, exchangeRate) }}</text></text>
			</view>
			<view class="amount-buttons-grid">
				<view 
					v-for="(item, index) in withdrawAmounts.slice(0, 6)" 
					:key="index" 
					class="amount-button"
					:class="{ 
						active: item.active,
						disabled: item.isDisabled
					}"
					@click="amountItemClick(item, index)"
				>
					<view class="button-content">
						<text class="amount-text">{{ Math.floor((item.amount / 100) * exchangeRate) }}{{symbol}}</text>
					</view>
					<view class="flame-icon" v-if="item.active">
						
					</view>
				</view>
			</view>
	
		</view>
		
				<view class="withdraw-all-section">
					<view class="withdraw-all-card" :class="{ 
						disabled: baseData.wallet.totalPoints < 1000,
						selected: withdrawAllSelected
					}" @click="withdrawAllshow">
						<view class="all-card-content">
							<view class="all-card-left">
								<view class="all-text-info">
									<text class="all-title">{{ t('Withdraw All') }}</text>
									<text class="all-subtitle">{{ t('Exceeding') }} {{ maxCount/100*exchangeRate }}
										{{ t('Can withdraw all') }}</text>
									<text class="all-subtitle">{{ t('No extra handling fee, withdraw all cash to your bank account') }}</text>
								</view>
							</view>
							<view class="all-card-right">
								<view class="all-badge">
									<text class="all-badge-text">{{ t('All') }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
	

		
		<view class="withdrawal-summary">
			<view class="summary-details">
				<view class="summary-item">
					<text class="summary-label">{{t('Withdrawal Amount')}}</text>
					<text class="summary-value">{{ Math.floor(baseData.withdrawForm.points / 100 * exchangeRate) }}{{symbol}}</text>
				</view>
				<view class="summary-item">
					<text class="summary-label">{{t('Bank Service Fee')}}</text>
					<text class="summary-value">{{ Math.floor(baseData.withdrawForm.Charge/100*exchangeRate) }}{{symbol}}</text>
				</view>
				<view class="summary-item">
					<text class="summary-label">{{t('Actual amount received')}}</text>
					<text class="summary-value">{{ Math.floor(baseData.withdrawForm.actual / 100 * exchangeRate * 100) / 100 }}{{symbol}}</text>
				</view>
			</view>
		</view>

		
		<view class="submit-section">
			<view class="submit-button" :class="{ disabled: withdrawBtnDisabled }" @click="showW">
				<text class="submit-text">{{t('Submit')}}</text>
			</view>
		</view>

		
		<view class="bottom-notes">
			<text class="note-title">{{t('NOTE')}}</text>
			<text class="note-text">!!!{{t(' Reason no amount can be withdrawn: Due to bank transfer limits, the receipt amount for this account has reached the maximum limit for this month. Please try again next month. You have already successfully withdrawn on the platform. Please be patient and wait for the bank to lift the limit')}}.</text>
		</view>

		
		<div class="telegram-wrapper">
			<div class="telegram-icon" @mousedown="startDrag" @touchstart="startDrag" :style="{
          top: dragPosition.y + 'px',
          left: dragPosition.x + 'px',
          zIndex: '99999',
          position: 'fixed'
        }">
				<img style="width: 2rem; height: 2rem;" src="@/static/teltgram.png" />
			</div>
		</div>
	</view>
</template>

<style lang="scss" scoped>
.withdraw-container {
  min-height: 100vh;
  background: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  position: relative;
}


.nav-header {
  display: flex;
  align-items: center;
  padding: 20px 30px;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  
  .back-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.3s ease;
    
    &:active {
      background: rgba(0, 0, 0, 0.1);
      transform: scale(0.95);
    }
    
    .back-arrow {
      font-size: 24px;
      color: #333;
      font-weight: 300;
    }
  }
  
  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-right: 40px; 
  }
}


.header-gradient-section {
  background-image: url("@/static/img/record_top.png");
  	    background-size: 100% 100%;
  padding: 50px 30px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  
  .title-section {
    .main-title {
      display: block;
      font-size: 28px;
      font-weight: 700;
      color: #333;
      letter-spacing: 2px;
      line-height: 1.2;
    }
  }
  
  .credit-card-3d {
    width: 120px;
    height: 80px;
	background-image: url("@/static/img/wd_icon.png");
		    background-size: 100% 100%;
    position: relative;
  }
}


.bank-account-section {
  padding: 0px 10px;
  
  .bank-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    
    &:active {
      transform: scale(0.98);
    }
    
    .card-left {
      display: flex;
      align-items: center;
      
      .bank-icon {
        width: 50px;
        height: 50px;
		background-image: url("@/static/img/bank.png");
				    background-size: 100% 100%;
      }
      
      .card-info {
        .card-title {
          font-size: 16px;
          font-weight: 600;
          color: rgb(46, 49, 146);
        }
      }
    }
    
    .card-right {
      display: flex;
      align-items: center;
      gap: 8px;
      
       .bind-info {
              display: flex;
              flex-direction: column;
              align-items: flex-end;
              gap: 4px;
            }
            
            .bind-text {
              font-size: 14px;
              color: #000000;
              line-height: 1.2;
            }
      
      .arrow {
        font-size: 28px;
        color: #F44336;
        font-weight: 700;
      }
    }
  }
}


.withdrawal-amount-section {
  padding: 10px 10px;
  
  .amount-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    
    .amount-title {
      font-size: 14px;
      font-weight: 700;
      color: #94c720;
    }
    
    .account-balance {
      font-size: 14px;
      color: #333333;
    }
  }
  
  .amount-buttons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    
    .amount-button {
      background: #f5f5f5;
      border: 1px solid #e0e0e0;
      border-radius: 12px;
      padding: 20px 15px;
      text-align: center;
      position: relative;
      
      &.active {
        background: linear-gradient(to right,#93f94e,#faf859)!important;
        
        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
        
        .amount-text {
          color: #333333 !important;
          font-weight: 700;
        }
      }
      
      &.disabled {
        opacity: 0.5;
        cursor: not-allowed;
        background: #f5f5f5;
        border-color: #ccc;
        
        .amount-text {
          color: #999;
        }
      }
      
      .button-content {
        .amount-text {
          font-size: 18px;
          font-weight: 600;
          color: #333;
        }
      }
      
      .flame-icon {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 16px;
        height: 16px;
        background-image: url("@/static/img/fir.png");
        background-size: 100% 100%;
      }
    }
  }
}


.withdrawal-summary {
  padding: 10px 20px;
  
  .summary-details {
    background: #ffffff;
    border: 1px solid #e0e0e0;
	box-shadow: 0 0 8px 4px #dfdfdf;
    padding: 20px;
    
    .summary-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
	  border-bottom: solid 1px #f1f1ef;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .summary-label {
        font-size: 14px;
        color: #000000;
      }
      
      .summary-value {
        font-size: 14px;
        color: #94c720;
        font-weight: 700;
      }
    }
  }
}


.submit-section {
  padding: 10px 20px;
  
  .submit-button {
    background: linear-gradient(to right,#93f94e,#faf859)!important;
    padding: 18px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
    
    &.disabled {
      background: #ccc;
      cursor: not-allowed;
      box-shadow: none;
    }
    
    &:active:not(.disabled) {
      transform: scale(0.98);
    }
    
    .submit-text {
      font-size: 16px;
      color: #333;
      font-weight: 700;
    }
  }
}


.bottom-notes {
  padding: 20px;
  
  .note-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #4CAF50;
    margin-bottom: 10px;
  }
  
  .note-text {
    display: block;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
  }
}

.withdraw-all-section {
	margin: 0 10px;
	margin-bottom:10px;
	
	.withdraw-all-card {
		background: #ffffff;
		border: 2px solid #e0e0e0;
		border-radius: 12px;
		padding: 15px;
		cursor: pointer;
		transition: all 0.3s ease;
		
		&.selected {
			border-color: #4CAF50;
			background: linear-gradient(135deg, #e8f5e8 0%, #ffffff 100%);
			box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
		}
		
		&.disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}
		
		&:active:not(.disabled) {
			transform: scale(0.98);
		}
		
		.all-card-content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.all-card-left {
				display: flex;
				align-items: center;
				flex: 1;
				.all-text-info {
					display: flex;
					flex-direction: column;
					
					.all-title {
						font-size: 16px;
						font-weight: 600;
						color: #4CAF50;
						margin-bottom: 4px;
					}
					
					.all-subtitle {
						font-size: 12px;
						color: #666;
						line-height: 1.3;
						margin-bottom: 2px;
					}
				}
			}
			
			.all-card-right {
				.all-badge {
					background: linear-gradient(90deg, #4CAF50 0%, #8BC34A 100%);
					border-radius: 20px;
					padding: 6px 12px;
					
					.all-badge-text {
						font-size: 12px;
						font-weight: 600;
						color: #ffffff;
					}
				}
			}
		}
	}
}

</style>